package com.xuexiang.xuidemo.slice.guideview;

import com.xuexiang.xui_lib.component.guidview.GuideCaseQueue;
import com.xuexiang.xui_lib.component.guidview.GuideCaseView;
import com.xuexiang.xuidemo.ResourceTable;
import com.xuexiang.xuidemo.slice.BaseAbilitySlice;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.StackLayout;
import ohos.eventhandler.EventHandler;
import ohos.eventhandler.EventRunner;

/**
 * 引导队列
 */
public class GuideCaseViewQueueAbilitySlice extends BaseAbilitySlice {
    Button mStep1;
    Button mStep2;
    Button mStep3;
    Button mStep4;
    StackLayout mRootLayout;

    @Override
    protected int getUIContentLayoutId() {
        return ResourceTable.Layout_guidecase_queue_slice;
    }

    @Override
    protected int getTitleBarId() {
        return ResourceTable.Id_title_bar;
    }

    @Override
    protected void initComponents() {
        super.initComponents();
        mStep1 = (Button) findComponentById(ResourceTable.Id_step1);
        mStep2 = (Button) findComponentById(ResourceTable.Id_step2);
        mStep3 = (Button) findComponentById(ResourceTable.Id_step3);
        mStep4 = (Button) findComponentById(ResourceTable.Id_step4);
        mRootLayout = (StackLayout) findComponentById(ResourceTable.Id_queue_layout);
        findComponentById(ResourceTable.Id_changePicture).setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                showPictureGuideView();
            }
        });

        new EventHandler(EventRunner.getMainEventRunner()).postTask(new Runnable() {
            @Override
            public void run() {
                showTextGuideView();
            }
        },1000);
    }

    /**
     * 显示文字引导
     */
    private void showTextGuideView() {
        final GuideCaseView guideStep1 = new GuideCaseView.Builder(getAbility())
                .title("请注意，这是第一步")
                .focusOn(mStep1)
                .root(mRootLayout)
                .build();

        final GuideCaseView guideStep2 = new GuideCaseView.Builder(getAbility())
                .title("请注意，这是第二步")
                .focusOn(mStep2)
                .root(mRootLayout)
                .build();

        final GuideCaseView guideStep3 = new GuideCaseView.Builder(getAbility())
                .title("请注意，这是第三步")
                .focusOn(mStep3)
                .root(mRootLayout)
                .build();

        final GuideCaseView guideStep4 = new GuideCaseView.Builder(getAbility())
                .title("请注意，这是第四步")
                .focusOn(mStep4)
                .root(mRootLayout)
                .build();

        new GuideCaseQueue()
                .add(guideStep1)
                .add(guideStep2)
                .add(guideStep3)
                .add(guideStep4)
                .show();
    }

    /**
     * 显示图片引导
     */
    private void showPictureGuideView() {
        final GuideCaseView guideStep1 = new GuideCaseView.Builder(getAbility())
                .picture(ResourceTable.Media_img_guidecaseview_1)
                .focusOn(mStep1)
                .root(mRootLayout)
                .build();

        final GuideCaseView guideStep2 = new GuideCaseView.Builder(getAbility())
                .picture(ResourceTable.Media_img_guidecaseview_2)
                .focusOn(mStep2)
                .root(mRootLayout)
                .build();

        final GuideCaseView guideStep3 = new GuideCaseView.Builder(getAbility())
                .picture(ResourceTable.Media_img_guidecaseview_3)
                .focusOn(mStep3)
                .root(mRootLayout)
                .build();

        final GuideCaseView guideStep4 = new GuideCaseView.Builder(getAbility())
                .picture(ResourceTable.Media_img_guidecaseview_4)
                .focusOn(mStep4)
                .root(mRootLayout)
                .build();

        new GuideCaseQueue()
                .add(guideStep1)
                .add(guideStep2)
                .add(guideStep3)
                .add(guideStep4)
                .show();
    }
}
